<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>节点操作</title>
	</head>

	<body>
		<span>节点操作</span>
		<p>DOM不单单可以查找节点也可以创建节点，复制节点，插入节点，删除节点和替换节点</p>
		<p>createElement在ie8以下的版本兼容性</p>
		<span>测试开始</span>
		<div id="box">测试处
			<span>第一个</span><span>第二个</span>
		</div>
		<span>测试结束</span>
	</body>

	<script type="text/javascript">
		window.onload = function() {
			//document.write("<p>我会覆盖掉之前的Dom</p>")
			var box = document.getElementById('box');
			var p = document.createElement('p') //只是创建了一个元素节点p，还没有添加到文档中去，只是驻留在内存中。
			box.appendChild(p); //将新节点p添加到id=box的div里的子接点列表的末尾上。
			var text = document.createTextNode('测试div'); //创建文本
			//p.appendChild(text);//把文本追加到p里面
			//box.appendChild(text);//把文本追加到div里

			//box.parentNode (div的父节点就是body)
			//box.parentNode.insertBefore(p,box);//添加到div前面,body里面
			//box.insertBefore(p);//插入div里
			//box.insertBefore(p,box);//插入div里面
			// insertAfter(p,box);//插入div后面
			//box应该先移除空白节点
			box.removeChild(cleanWhitespace(box).firstChild) //删除box第一个节点
		  //box.parentNode.removeChild(box);//删除整个box
		}

		//在节点后面添加元素节点的方法
		function insertAfter(newElement, targetElement) {
			//得到父节点
			var parent = targetElement.parentNode;
			//先判断是否是目标节点（此处还应该移除空白节点）
			if(parent.lastChild === targetElement) {
				//直接插入
				parent.appendChild(newElement, targetElement);
			} else {
				//插入     nextSibling表示下一节点
				parent.insertBefore(newElement, targetElement.nextSibling);
			}

		}

		//2移除空白文本
		function removeWhiteNode(node) {
			for(var i = 0; i < node.childNodes.length; i++) {
				if(node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)) {
					node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
				}
			}
			return node;
		}

		//移除节点空白文本
		function cleanWhitespace(oEelement) {
			for(var i = 0; i < oEelement.childNodes.length; i++) {
				var node = oEelement.childNodes[i];
				if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
					node.parentNode.removeChild(node)
				}
			}
			return oEelement;
		}
	</script>

</html>